<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>web</title>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
		<link rel="stylesheet" href="css/animate.css">
		<link rel="stylesheet" href="css/global.css">
		<link rel="stylesheet" href="css/loading.css">
		<!--<script type="text/javascript" src="js/openid.js" ></script>-->
		<script>
			localStorage.setItem("openId","ooo")
		</script>
		<style>
    video {
        border: 1px solid #ccc;
        display: block;
        margin: 0 0 20px 0;
        float:left;
    }
    #canvas {
        margin-top: 20px;
        border: 1px solid #ccc;
        display: block;
    }
    .red {
			border: 1px solid red !important;
		}
		
	div.div{
		display: flex;align-items: center;
	}
	div.div label{
		width: 15%;
	}
	div.div fieldset{
		width: 70%;
	}
	div.div div{
		width: 100% !important;
	}
</style> 
	</head>

	<body>
		<div data-role="page">
			<div data-role="main" class="ui-content">
				<form id="uploadForm">
					<div class="div">
						<label for="day" >名称</label>
						<fieldset data-role="fieldcontain">
							<select onchange="hoteldre(this)" id="hotel">
								<option value="n">请选择</option>
							</select>
						</fieldset>
					</div>
					<div class="div">
						<label for="day1">地址</label>
						<fieldset data-role="fieldcontain">
							<select  class="ss" name="address_id" id="hotelplace">
								<option value="n">请选择</option>
							</select>
						</fieldset>
					</div>
					<div class="div">
						<!--<label >姓名</label>-->
						<input type="text" name="name" id="name" placeholder="请输入姓名">	
					</div>
					<div class="div">
						<!--<label for="fname">手机号</label>-->
						<input type="number" name="phone" id="phone" placeholder="请输入手机号">
					</div>
					<div class="div">
						<!--<label for="fname">证件号</label>-->
						<input type="number"  name="idcard" id="idcard" placeholder="请输入证件号">	
					</div>
					<!--411104198904197884-->
					<input type="hidden" name="sex"  id="sex">
					<input type="hidden" name="bir" id="bir"  >
					<input type="hidden" name="openid" id="openid" value="111" >
					<input id="files" style="display:none;" type="file" name="file" multiple="multiple" accept="image/*" capture="camera" >
					<div id="img1" style="width: 80px;height: 80px;">
					    <img style="width: 100%;" src="img/upimg.png" />
					</div>
					<!--<input type="button" onclick="btn()"  value="提交">-->
				</form>
					<button  onclick="btn()">提交</button>
			</div>
		</div>
	</body>
	
	
	<script src="js/jquery-2.1.0.js"></script>
	<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
	<script type="text/javascript" src="js/loading.js" ></script>
	<script type="text/javascript" src="js/img.js" ></script>
	<script type="text/javascript" src="js/ajax.js" ></script>
<script>
//	var idca = isCardID('411104198904197884');
//	console.log(idca.split(","));
	
	var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
	var num =  /^[\u4E00-\u9FA5A-Za-z]+$/;
	$("input").blur(function() {
			if(this.value=="") {
				$(this).addClass("red");
				return false;
			}else{
				$(this).removeClass("red");
			}
			if(this.id=="name"){
				if(!num.test($("#name").val())) {
	//				alert('请输入有效的手机号码！');
					$(this).addClass("red");
					console.log(this.id)
					return false;
				}else{
					$(this).removeClass("red");
				}
			}
			if(this.id=="phone"){
				if(!myreg.test($("#phone").val())) {
	//				alert('请输入有效的手机号码！');
					$(this).addClass("red");
					console.log(this.id)
					return false;
				}else{
					$(this).removeClass("red");
				}
			}
			if(this.id=="idcard"){
				var idcd = $("#idcard").val();
				var sca = isCardID(idcd)
				var carArr = sca.split(",");
				console.log(carArr)
				if(sca.indexOf("-")>-1) {
					$("#sex").val(carArr[2]);
					$("#bir").val(carArr[1]);
					$(this).removeClass("red");
				}else{
					$(this).addClass("red");
					console.log(this.id)
					return false;
				}
			}
			
			
			
			
		})
	
	
	function hoteldre(o){
		var hotelId = o.value;
		$(".ss").empty();
		$(".ss").html("<option>请选择</option>")
		selectdata("/api/v1/hotel_address","#hotelplace",{hotel_id:hotelId});	
	}
	
	function btn(){
		var address_id = $("#hotelplace").val();
		
		var name = $("#name");
		var name = $("#idcard");
		sub();
//		var name = $("#");
//		var name = $("#");
//		sub("post","/api/v1/hotel_record")
	}
	
	
    $(function () {
    	$("#img1").on("click",function(){
    		$("#files").click();
    	})
        $('input[name=file]').change(function(e){
            var files = $('input[name=file]').get(0).files;
            var img = new Image();
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function(e){
                img.src = this.result;
                img.style.width = "80%";
                $('#img1').innerHTML = '';
                $('#img1').html(img);
            }
        })
//      $("#sex,#bir,#openid").parent("div").css("display","none");
        //下拉数据
        selectdata("/api/v1/hotel_info","#hotel");
       
        
    })


</script>
</html>